<script setup lang="ts">
import { computed } from 'vue';
import { getCurrentInstance, reLaunch, setClipboardData, showToast } from '@tarojs/taro';
import IMG_SUCCESS from '/@/assets/image/icon/success.png';

/**
 * @description 当前路由信息
 */
const params = getCurrentInstance().router?.params as unknown as {
  realLink: string;
};

const readLink = computed(() => {
  if (params.realLink) return decodeURIComponent(params.realLink);

  return '';
});
</script>

<template>
  <view class="visitor-appointment-success app-page--1">
    <scroll-view class="app-page__wrapper" :scroll-y="true" :lower-threshold="100">
      <view class="visitor-appointment-success__header-wrapper">
        <view>
          <image class="visitor-appointment-success__img" :src="IMG_SUCCESS" />
        </view>
        <view>提交成功!</view>
      </view>
      <view v-if="readLink" class="visitor-appointment-success__wrapper">
        <view>您也可以复制预约地址直接发给访客:</view>
        <view class="visitor-appointment-success__read-link">{{ readLink }}</view>
        <view class="visitor-appointment-success__copy-btn-wrapper">
          <nut-button
            class="visitor-appointment-success__copy-btn"
            @click="
              setClipboardData({
                data: readLink,
                success: () => {
                  showToast({ title: '链接已复制!', icon: 'success' });
                },
              })
            "
          >
            复制链接
          </nut-button>
        </view>
      </view>
    </scroll-view>
    <view class="visitor-appointment-success__footer">
      <nut-button type="info" shape="round" block @click="reLaunch({ url: '/pages/index/index' })">
        返回首页
      </nut-button>
    </view>
  </view>
</template>

<style lang="scss">
.visitor-appointment-success {
  text-align: center;
  font-weight: bold;
  font-size: 32px;
  color: #333;
  background-color: #fff;

  &__header-wrapper {
    font-size: 50px;
    margin-top: 5vh;
    margin-bottom: 10px;
  }

  &__img {
    width: 250px;
  }

  &__wrapper {
    margin-top: 60px;
  }

  &__read-link {
    margin-top: 20px;
    font-size: 28px;
    color: #999;
  }

  &__copy-btn-wrapper {
    margin-top: 60px;
  }

  &__copy-btn {
    color: #507aee;
    padding: 20px 120px;
    background-color: #f3f6ff;
    border-color: #d8ddeb;
  }

  &__footer {
    padding: 20px 30px;
    box-shadow: 0px -5px 5px 0 rgba(222, 222, 222, 0.32);
  }
}
</style>
